<template>
  <div style="padding-left: 5px">
    <vxe-toolbar ref="xToolbar" :loading="loading > 0">
      <template #buttons>
        <a-button type="primary" icon="save" @click="saveEvent">{{ $t('m.common.button.save') }}</a-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      header-align="center"
      border
      keep-source
      :height="height - 52 - 40"
      show-overflow
      show-header-overflow
      ref="xTable"
      :row-config="{isHover: true, keyField: 'id'}"
      :loading="loading > 0"
      :data="tableData"
      :edit-rules="validRules"
      :column-config="{resizable: true}"
      :edit-config="{trigger: 'click', mode: 'row', showUpdateStatus: true, showInsertStatus: true}">
      <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
      <vxe-column field="colCode" :title="$t('m.eform.apptable.entity.colCode')" width="150"></vxe-column>
      <vxe-column field="colName" :title="$t('m.eform.apptable.entity.colName')" width="150"></vxe-column>
      <vxe-column field="code" :title="$t('m.common.label.code')"></vxe-column>
      <vxe-column field="zhCn" :title="$t('m.common.label.Chinese')" :edit-render="{name: 'input'}"></vxe-column>
      <vxe-column field="enUs" :title="$t('m.common.label.English')" :edit-render="{name: 'input'}"></vxe-column>
    </vxe-table>
    <vxe-pager
      border
      size="small"
      :loading="loading > 0"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :page-sizes="tablePage.pageSizes"
      :layouts="tablePage.layouts"
      @page-change="handlePageChange">
    </vxe-pager>
  </div>
</template>

<script>

import {getAction} from '@/api/manage'
import YchConstant from "@/api/YchConstant";
import {LocaleMixin} from "../js/LocaleMixin";
import {VxeTableMixin} from "../js/VxeTableMixin";

export default {
  name: 'LocaleTableList',
  mixins: [LocaleMixin, VxeTableMixin],
  props: {
    tableName: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      default: 300
    },
  },
  data() {
    return {
      validRules: {},
      url: {
        getTableCols: YchConstant.PREFIX_EFORM + '/manage/localeProvider/getTableCols',
        saveLocales: YchConstant.PREFIX_EFORM + '/manage/localeProvider/saveLocales',
        copyFromTable: YchConstant.PREFIX_EFORM + '/manage/localeProvider/copyFromTable',
      }
    }
  },
  methods: {
    async loadList() {
      this.loading++
      const param = this.getPageQuery()
      param['tableName'] = this.tableName
      let res = await getAction(this.url.getTableCols, param)
      // 为方便历史数据刷新，如果是第一次，则自动初始化
      if (res.success && res.result.records.length === 0 && param.pageNo === 1) {
        await this.copyFromTable(true)
        res = await getAction(this.url.getTableCols, param)
      }
      if (res.success) {
        this.tableData = res.result.records
        this.setPageTotal(res)
      } else {
        this.tableData = []
        this.messageUtil.warning(res.message)
      }
      this.loading--
    }
  },
  watch: {
    tableName: {
      handler() {
        this.loadList()
      },
      immediate: true
    }
  }
}
</script>
